<template>
  <li>
    <el-popover
      class="nav-item nav-subnav"
      popper-class="header-alllesson-popper"
      placement="bottom-start"
      width="768"
      trigger="hover"
      :appendToBody="false"
    >
      <a class="link" slot="reference">全部课程</a>
      <div class="nav-subnav-container">
        <div class="classify-panel">
          <a href="/viewMore" class="panel-title">全部课程</a>
          <div class="panel-body">
            <ul>
              <li v-for="item in lessonClassify.classify" :key="item.value">
                <a href="/viewMore">{{item.label}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="classify-panel">
          <a href="/viewMore" class="panel-title">课程类型</a>
          <div class="panel-body">
            <ul>
              <li v-for="item in lessonClassify.type" :key="item.value">
                <a href="/viewMore">{{item.label}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-popover>
  </li>
</template>

<script>
import { LESSON_CLASSIFY, LESSON_TYPE } from "@/common/dictionary/lesson.js";
export default {
  name: "ucAutoComplete",
  data() {
    return {
      lessonClassify: {
        classify: [...LESSON_CLASSIFY],
        type: [...LESSON_TYPE]
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    toNewsCenter() {},
    toRegister() {},
    toProfile() {}
  }
};
</script>

<style lang="scss" >
@import "~/scss/themes/index.scss";

.header-alllesson-popper.el-popper {
  border-color: #e5e5e5;
  border-radius: 0;
  padding: 0;

  &:hover {
  }
  .nav-subnav-container {
    .classify-panel {
      padding: 18px 20px 0;
      border-bottom: 1px solid #e5e5e5;
      .panel-title {
        font-size: 16px;
        font-weight: bold;
        line-height: 15px;
        letter-spacing: 0px;
        color: #000000;
        cursor: pointer;
        text-decoration: none;
      }
      .panel-body {
        padding: 16px 0 2px 0;
      }
    }
    ul {
      li {
        display: inline-block;
        line-height: 1;
        width: auto;
        padding: 0 25px 16px 0;
        a {
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 15px;
          letter-spacing: 0px;
          color: #333333;
          cursor: pointer;
          white-space: none;
          text-decoration: none;
          &:hover {
            // color: ;
          }
        }
      }
    }
  }
}
</style>
